//右侧页面加载
function loadRightPage(room_name, group) {
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    var socketAddr;
    var configInfo;
    var xCateArray = [];
    var esCountArray = [];
    var mysqlCountArray = [];
    $.getJSON("../../es/mapping/viewConfig?_" + $.now(), function (configResult) {
        socketAddr = configResult.websocketaddr;
        configInfo = configResult.rows;
        for (var i = 0, len = configInfo.length; i < len; i++) {
            xCateArray.push(configInfo[i].databaseName + "." + configInfo[i].tableName + " ->" + configInfo[i].esIndex + "." + configInfo[i].esType);
            esCountArray.push(configInfo[i].esCount);
            mysqlCountArray.push(configInfo[i].mysqlCount);
        }
        window.chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container', //要显示线状图的div的id
                type: 'bar'
            },
            title: {
                text: 'Mysql同步到ES概况'
            },
            subtitle: {
                text: '按照配置实时同步的统计数据'
            },
            xAxis: {
                categories: xCateArray,
                title: {
                    text: null
                }
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 80,
                floating: true,
                borderWidth: 1,
                shadow: true
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [
                {
                    name: 'ES数量',  //Label 名称
                    data: esCountArray
                },
                {
                    name: 'mysql数量',  //Label 名称
                    data: mysqlCountArray
                }
            ]
        });
        if (window.WebSocket) {
            if (window.socket_obj) {
                window.socket_obj.closeWebSocket();
            }
            window.socket_obj = new webSocketConnectInit({
                reqUrl: [socketAddr, [room_name + ' ' + group]]
            });
            window.socket_obj.init();
        }
    });
}

//刷新页面相关的数据
function refreshPageData(res) {
    res = eval('(' + res + ')');
    refreshChartChanged(res);
}

//刷新数据
function refreshChartChanged(configInfo) {
    //console.info(configInfo);
    var xCateArray = [];
    var esCountArray = [];
    var mysqlCountArray = [];
    for (var i = 0, len = configInfo.length; i < len; i++) {
        xCateArray.push(configInfo[i].databaseName + "." + configInfo[i].tableName + " ->" + configInfo[i].esIndex + "." + configInfo[i].esType);
        esCountArray.push(configInfo[i].esCount);
        mysqlCountArray.push(configInfo[i].mysqlCount);
    }
    window.chart.xAxis[0].setCategories(xCateArray);
    window.chart.series[0].setData(esCountArray);
    window.chart.series[1].setData(mysqlCountArray);

}

var vm = new Vue({
    el: '#dpLTE',
    methods: {
        load: function () {
            $('#dataGrid').bootstrapTable('refresh');
        },
        createMapping: function () {
            $.ConfirmAjax({
                msg: "重新生成mapping，必须确认已经清空ES中的index，您确认吗？",
                url: '../../es/mapping/initMapping?_' + $.now(),
                success: function (r) {
                    if(r.code==0){
                        dialogMsg(r.data, 'success');
                    }else {
                        dialogMsg("重新生成mapping异常，结果可能失败，可以重新清空之后尝试", 'error');
                    }
                }
            });
        },
        clearIndex: function () {
            $.ConfirmAjax({
                msg: "此操作会删除ES中的配置相关的索引，您确定吗？",
                url: '../../es/mapping/removeAll?_' + $.now(),
                success: function (r) {
                    if(r.code==0){
                        dialogMsg(r.data, 'success');
                    }else {
                        dialogMsg("清空ES中的index异常，结果可能失败，可以重新清空", 'error');
                    }
                }
            });
        },
        removeEsByDataBase: function () {
            var dataBaseName=prompt("请输入要清空的dataBaseName!");
            $.ConfirmAjax({
                msg: "此操作会删除ES中"+dataBaseName+"的配置相关的索引，您确定吗？",
                url: '../../es/accuratelySync/removeEsByDataBase?_' + $.now(),
                param:{"dataBaseName":dataBaseName},
                contentType:"application/json",
                success: function (r) {
                    if(r.code==0){
                        dialogMsg(r.data, 'success');
                    }else {
                        dialogMsg("清空ES中的index异常，结果可能失败，可以重新清空", 'error');
                    }
                }
            });
        },
        createMappingByDataBase: function () {
            var dataBaseName=prompt("请输入要生成的dataBaseName!");
            $.ConfirmAjax({
                msg: "重新生成mapping，必须确认已经清空ES中的"+dataBaseName+" index，您确认吗？",
                url: '../../es/accuratelySync/initMappingByDataBase?_' + $.now(),
                param:{"dataBaseName":dataBaseName},
                contentType:"application/json",
                success: function (r) {
                    if(r.code==0){
                        dialogMsg(r.data, 'success');
                    }else {
                        dialogMsg("重新生成mapping异常，结果可能失败，可以重新清空之后尝试", 'error');
                    }
                }
            });
        },
        syncDataByDataBase: function () {
            var dataBaseName=prompt("请输入要生成的dataBaseName!");
            $.ConfirmAjax({
                msg: "您确定要通过配置信息，同步"+dataBaseName+"全库数据吗？",
                url: '../../es/accuratelySync/byConfigByDataBase?_' + $.now(),
                param:{"dataBaseName":dataBaseName},
                contentType:"application/json",
                success: function (r) {
                    if(r.code==0){
                        dialogMsg(r.data, 'success');
                    }else {
                        dialogMsg("同步数据异常，结果可能失败，可以重新清空从头开始", 'error');
                    }
                }
            });
        },

        syncData: function () {
            $.ConfirmAjax({
                msg: "您确定要通过配置信息，全库同步数据吗？",
                url: '../../es/mapping/byConfig?stepSize=500&_' + $.now(),
                success: function (r) {
                    if(r.code==0){
                        dialogMsg(r.data, 'success');
                    }else {
                        dialogMsg("同步数据异常，结果可能失败，可以重新清空从头开始", 'error');
                    }
                }
            });
        }
    }
})
